<template>
    <el-header :class="{'header-nav':true,'header-nav-lg':isCollapse}" >
        <a href="#" class="btn-collapse" @click="Collapse">
            <i class="fa fa-bars"></i>
        </a>
        <div style="float:right">
            <el-dropdown trigger="click">
                <span class="el-dropdown-link header-title">
                    <el-badge :value="list.length" :max="10" class="item">
                        <i class="el-icon-bell el-icon--right"></i>
                    </el-badge>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="item in list" :key="item">
                        {{item}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown trigger="click">
                <span class="el-dropdown-link header-title">
                    {{client.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <router-link :to="{path:'/Login'}">
                            注销
                        </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link :to="{path:'/Password'}">
                            修改密码
                        </router-link>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </el-header>
</template>

<script>
  export default {
    data(){
      return {
        isCollapse: false,
        client:JSON.parse(sessionStorage.getItem('user')),
        list:[]
      };
    },
    computed:{
    },
    components: {
    },
    mounted(){
        this.$root.Bus.$on('boxMessage',value=>{
            //接收推送
            this.list.push(value);
        });
    },
    methods:{
        Collapse(){
            this.isCollapse=!this.isCollapse;
            this.$root.Bus.$emit('isCollapse',this.isCollapse);
        }
    }
  }
</script>

<style scoped>
    .header-nav{
        /* 转组件新增样式 */
        position: absolute;
        right: 0;
        left: 0;
        /* 转组件新增样式 */
        margin-left: 199px;
        transition:margin-left .3s;
        transition-timing-function:ease-in-out;
        background:#fff;
        padding-top:0.7%;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border-bottom: 1px solid #ebeef5
    }
    .header-nav-lg{
        margin-left: 63px;
    }
    .btn-collapse{
        color: rgba(0, 0, 0, 0.5);
        line-height: 32px;
        padding: 6px 0;
    }
    .header-title{
        font-size: 16px;
        font-weight: 500;
        color: #606266;
        line-height: 35px;
    }
    .el-dropdown-menu li:hover{
        background-color: #f7f7f9;
    }
    .el-dropdown-menu li a{
        color: #333;
        display: block;
    }
    .item {
        margin-top: 0px;
        margin-right: 10px;
    }
</style>